<template>
  <div class="hello">
    <my-header>
      <template v-slot:left>
        <i class="iconfont icon-xiangzuojiantou ok"></i>
      </template>
      <template v-slot:center>
        <div class="search">
          <i class="iconfont icon-search i"></i> <input type="text" class="inp" placeholder="输入城市/景点/游玩主题">
        </div>
      </template>
      <template v-slot:right>
        <div class="s" @click="$router.push('/myCity')"><span>北京</span><i class="iconfont icon-xiajiantou x"></i></div>
      </template>
    </my-header>
    <home-swipe :swiperList="swiperList"></home-swipe>
    <!-- grild -->
    <my-grild :iconList="iconList"></my-grild>
    <!--  -->
    <div class="tj">
      热销推荐
    </div>
    <my-list :recommendList="recommendList"></my-list>
    <weekend :weekendList="weekendList"></weekend>
  </div>
</template>

<script>
import axios from "axios";
import myHeader from "./header";
import myList from "./list";
import weekend from "./weekend";
import homeSwipe from "./homeSwipe";
import myGrild from "./Grild";
export default {
  name: "HelloWorld",
  data() {
    return {
      iconList: [],
      recommendList: [],
      weekendList: [],
      swiperList: []
    };
  },
  computed: {},
  components: {
    myHeader,
    myList,
    weekend,
    homeSwipe,
    myGrild
  },
  mounted() {
    axios.get("/static/index.json").then(res => {
      const req = res.data.data;
      console.log(req);
      this.iconList = req.iconList
      this.swiperList = req.swiperList
      this.weekendList = req.weekendList
      this.recommendList = req.recommendList
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.hello {
  width: 7.5rem;
  height: 100vh;
  background: #ebebeb;
}

.ok {
  color: #fff;
  font-size: 0.4rem;
}
.inp {
  padding-left: 0.5rem;
  width: 5.4rem;
  height: 0.6rem;
  border: none;
  border-radius: 0.1rem;
  font-size: .28rem;
}
.icon-desc {
  font-size: 0.32rem;
}
.search {
  // display: flex;
  border-radius: 0.1rem;
  position: relative;
  .i {
    position: absolute;
    color: #858588;
    font-size: 0.4rem;
    left: 0.1rem;
    top: 0.1rem;
  }
}
.s {
  display: flex;
  .x {
    color: #fff;
    font-size: 0.24rem;
    // transform: translateY(0.1rem);
  }
}

// .box {
//   overflow: hidden;
//   height: 4rem;
//   display: flex;
//   flex-wrap: wrap;
//   .icon {
//     overflow: hidden;
//     width: 25%;
//     text-align: center;
//     // height: 1.7rem;
//   }
//   .icon-img {
//     //  padding-top: ;
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//   }
//   .icon-img-content {
//     display: block;
//     margin: auto;
//     width: 1.2rem;
//     height: 1.2rem;
//   }
// }
.tj {
  padding-left: 0.2rem;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.36rem;
}
</style>

